<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item">
          <span>保单状态</span>
          <div class="right">
            <span v-for="(item, index) in statuslist" :key="index" :class="params_list.status == item ? 'active' : ''" @click="selected(item)">{{item}}</span>
          </div>
        </div>
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>保险类型</span>
              <el-select class="tel-value" v-model="params_list.type" placeholder="请选择">
                <el-option label="车险" value="0"></el-option>
                <el-option label="其他" value="1"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>客户姓名</span>
              <el-input class="tel-value" v-model="params_list.username" placeholder="请输入客户姓名"></el-input>
            </div>
            <div class="item-inline">
              <span>客户手机号</span>
              <el-input class="tel-value" v-model="params_list.tel" placeholder="请输入客户手机号"></el-input>
            </div>
            <div class="item-inline">
              <span>承保机构</span>
              <el-select class="tel-value" v-model="params_list.mechanism" placeholder="请选择">
                <el-option label="太平洋保险" value="0"></el-option>
                <el-option label="其他" value="1"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>出单账号</span>
              <el-input class="tel-value" v-model="params_list.name" placeholder="请输入出单账号"></el-input>
            </div>
            <div class="item-inline">
              <span>保单号</span>
              <el-input class="tel-value" v-model="params_list.no" placeholder="请输入保单号"></el-input>
            </div>
            <div class="item-inline">
              <span>保险类别</span>
              <el-select class="tel-value" v-model="params_list.category" placeholder="请选择">
                <el-option label="交强险" value="0"></el-option>
                <el-option label="商业险" value="1"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <span>车牌号</span>
              <el-input class="tel-value" v-model="params_list.carNo" placeholder="请输入车牌号"></el-input>
            </div>
            <div class="item-inline">
              <span>订单来源</span>
              <el-select class="tel-value" v-model="params_list.ly" placeholder="请选择">
                <el-option label="手动订单" value="0"></el-option>
                <el-option label="自动续保" value="1"></el-option>
              </el-select>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          保险订单列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" :loading="boo.isExport" @click="exportRow">{{boo.isExport ? '请稍后……' : '导出'}}</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="no" label="保单号" width="150" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row)" type="text" size="small">{{scope.row.voucherNo}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="订单时间" width="120" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="ly" label="订单来源" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="category" label="保险类别" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="name" label="承保机构" align="center" width="120" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="user" label="出单账号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="type" label="保险类型" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="carNo" label="车牌号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="所在地区" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="username" label="客户姓名" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="sum" label="保单今额" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">新建营销订单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
           <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
  import list from 'static/json/order/insurance.json'
	export default {
		data() {
			return {
        // https: this.$api.order.list,
        boo: {
          loading: false,
          isExport: false,
        },
        other: {
          allRow: 1,
        },
        list: list,
        statuslist: ['全部','已询价，待核保','已核保，待支付','已支付'],
        params_list: {
          page: 1,
          size: 10,
          status: '',
          type: '',
          no: '',
          username: '',
          tel: '',
          mechanism: '',
          name: '',
          category: '',
          carNo: '',
          ly: '',
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {
          consumerLoginnameOrMobile: _self.params_list.username,
          orderBy: '',
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
        }
        // _self.boo.loading = true
        // let success = (res)=>{
        //   res = res.data
        //   if(res.retCode == 1){
        //     _self.list = res.retObject.list
        //     _self.other.allRow = Number(res.retObject.totalRow)
        //   }else{
        //     _self.$message.error(res.retMsg)
        //   }
        //   _self.boo.loading = false
        // }
        // _self.$axios.get(_self.https.list, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        _self.getList()
      },
      viewRow(item){
        // let _self = this
        // let params = {
        //   path: '/order/detail/order_detail?id=',
        //   query: item.id
        // }
        // _self.$router.push(params.path + params.query)
      },
      exportRow(){

      },
      hiddenRow(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .table-item .right span
    width: 62px
</style>
